<template>
  <div id="app">
    <header class="head">
      <a class="back tl" href="javascript:history.back(-1)">
        <i class="el-icon-arrow-left"></i>
      </a>
      <a href="javascript:;" class="tc">
        <small class="font_18 co_f">添加菜单留样</small>
      </a>
      <a href="javascript:;" class="save">
        <button @click="submitForm()" type="primary">保存</button>
      </a>
    </header>
    <main>
      <div class="formcontent">
        <ul>
          <li>
            <span>
              <em>*</em>活动名称</span>
            <div class="froms">
              <input type="text" name="keepSampleName" v-model="formName.keepSampleName" v-validate="'required'" :class="{'is-danger': errors.has('keepSampleName')}">
            </div>
          </li>
          <li>
            <span>餐次</span>
            <div class="froms">
              <el-select v-model="formName.timeType" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </li>
          <li>
            <span>留样菜品</span>
            <div class="froms">
              <input type="text" v-model="formName.dishesName">
            </div>
          </li>
          <li>
            <span>留样日期</span>
            <div class="froms">
              <el-input placeholder="请选择日期" icon="date" :disabled="true" v-model="formName.dataValue" name="dataValue" @click="openPickerdDate()" v-validate="'required'" :class="{'is-danger': errors.has('dataValue')}">
              </el-input>
              <mt-datetime-picker ref="picker" type="date" year-format="{value}年" month-format="{value} 月" date-format="{value} 日" v-model="pickerValue" @cancel="handleCanceDate" @confirm="handleConfirmDate"></mt-datetime-picker>
            </div>
          </li>

          <li>
            <span>留样重量（克/g）</span>
            <div class="froms">
              <input type="text" v-model="formName.keepSampleNum">
            </div>
          </li>
          <li>
            <span>
              <em>*</em>留样人员</span>
            <div class="froms">
              <input type="text" name="msg" @click="handleClick" v-model="msg" v-validate="'required'" :class="{'is-danger': errors.has('msg')}">
              <!--<span @click="handleClick">{{msg}}</span>-->
              <mt-popup v-model="popupVisible" position="right" modal=false class="mint-popup-3">
                <app-person v-on:listenToChildEvent="peopleClick" v-on:listencloseclick="clickmodl"></app-person>
              </mt-popup>
            </div>
          </li>

          <li>
            <span>备注</span>
            <div class="froms">
              <input type="text" v-model="formName.note">
            </div>
          </li>
        </ul>
      </div>
    </main>
  </div>
</template>

<script>
import Person from '@/components/institutionPerson'
import { KeepSampledAdd, InstitutionPerson } from '../../api/api';
import { Popup, DatetimePicker } from 'mint-ui';
var moment = require('moment');
export default {
  name: 'add_mrcj',
  components: {
    'mt-popup': Popup,
    'mt-datetime-picker': DatetimePicker,
    'app-person': Person

  },
  data() {
    return {
      msg: '',
      getNowFormatDate: null,
      CriteriaList: [],
      options: [{
        value: '早餐',
        label: '早餐'
      }, {
        value: '午餐',
        label: '午餐'
      }, {
        value: '晚餐',
        label: '晚餐'
      }, {
        value: '午晚餐',
        label: '午晚餐'
      }, {
        value: '全天候',
        label: '全天候'
      }],
      //时间
      pickerValue: moment().format('YYYY-MM-DD'),
      formName: {
        dataValue: '',
        keepSampleName: '',
        timeType: '',
        dishesName: '',
        keepSampleNum: '',
        note: '',
        institutionPersonname: '',
        institutionPersonunid: '',
      },
      value: '',
      //组件
      seachtext: '',
      popupVisible: false,
      closeOnClickModal: false,
      getPerson: [],
      Enterprise: {},
      PageSize: 10,
    };
  },
  computed: {
    errors() {
      return this.$verify.$errors
    }
  },
  methods: {
    //获取日期
    openPickerdDate() {
      this.$refs.picker.open();
    },
    handleCanceDate() {
      let _this = this
      _this.pickerValue = _this.formName.dataValue
    },
    // 确定按钮 --- 判断该时间是否可选，若可选则把值赋给输入框的dataValue
    handleConfirmDate(val) {
      let _this = this
      _this.formName.dataValue = moment(val).format('YYYY-MM-DD')
    },

    //弹窗
    handleClick: function() {
      this.popupVisible = true
    },
    clickmodl: function() {
      this.popupVisible = false
    },
    //获取item
    peopleClick: function(data) {
      this.formName.institutionPersonname = data.name;
      this.formName.institutionPersonunid = data.unid;
      this.clickmodl();
      this.msg = this.formName.institutionPersonname
    },
    //提交方法
    submitForm: function() {
      //定义需要传给通讯的参数：string Data--实体MorningRecord的序列化值 string UserUnid--当前操作用户标识   stringify对象解析字符串 parse字符串解析对象
      this.$validator.validateAll().then((result) => {
        if (result) {
          let varQueryData = {
            Name: this.formName.institutionPersonname,
            Unid: this.formName.institutionPersonunid,
          }
          let varEnterpriseUnid = {
            Unid: JSON.parse(localStorage.getItem('auth')).enterpriseUnid,
            Name: JSON.parse(localStorage.getItem('auth')).enterpriseName,
          }
          let data = {
            KeepSampleTime: moment(this.formName.dataValue).format('YYYY-MM-DD 00:00:00'),
            keepSampleName: this.formName.keepSampleName,
            TimeType: this.formName.timeType,
            DishesName: this.formName.dishesName,
            KeepSampleNum: this.formName.keepSampleNum,
            Note: this.formName.note,
            EnterprisePerson: varQueryData,
            varEnterpriseUnid: this.varEnterpriseUnid,

          }
          let dataoption = {
            params: {
              Data: JSON.stringify(data),
              UserUnid: JSON.parse(localStorage.getItem('auth')).UserUnid,
            }
          }
          //调取接口
          KeepSampledAdd(dataoption).then((res) => {
            if (res.success === true) {
              this.$message.success('保存成功');
              this.$router.go(-1);
            } else {
              this.$message.error(res.msg);
            }
          }).catch(function() {
            this.$message.error('网络异常。');
          })

        }else{
          this.$message.error('带*号为必填项，请确认填写格式正确');
        }
      })
    },
  }
}
</script>

<style lang="scss">

</style>
